<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>干线协调优化平台 - 工作记录</title>
    <link rel="stylesheet" href="../components/libs/fontawesome/6.7.2/css/all.min.css" />
    <link rel="stylesheet" href="../components/common/base.css">
    <link rel="stylesheet" href="./index.css" />
    <link rel="stylesheet" href="./work.css" />
</head>

<body class="bg-dark-gradient">
    <!-- 顶部导航组件 -->
    <header class="layout-header">
        <!-- Logo区域 -->
        <div class="layout-logo">
            <i class="fas fa-traffic-light logo-icon"></i>
            <span class="logo-text">干线协调优化平台</span>
        </div>
        
        <!-- 弹性空间 -->
        <div class="header-spacer"></div>
        
        <!-- 业务菜单 -->
        <nav class="header-nav">
            <a href="index.html" class="nav-item" data-action="home">
                <i class="fas fa-home"></i>
                <span>首页</span>
            </a>
            <a href="greenwave-sections.html" class="nav-item" data-action="sections">
                <i class="fas fa-road"></i>
                <span>绿波路段</span>
            </a>
            <a href="cal.html" class="nav-item" data-action="greenwave">
                <i class="fas fa-calculator"></i>
                <span>绿波计算</span>
            </a>
            <a href="tracking.html" class="nav-item" data-action="tracking">
                <i class="fas fa-route"></i>
                <span>绿波效果跟踪</span>
            </a>
            <a href="history.html" class="nav-item" data-action="history">
                <i class="fas fa-history"></i>
                <span>历史方案</span>
            </a>
            <a href="work.html" class="nav-item active" data-action="work">
                <i class="fas fa-clipboard-list"></i>
                <span>工作记录</span>
            </a>
        </nav>
    </header>

    <!-- 主内容区域 -->
    <main class="main-content">
        <div class="work-container">
            <!-- 页面标题区域 -->
            <header class="work-header">
                <div class="work-title">
                    <i class="fas fa-clipboard-list"></i>
                    <h1>工作记录管理</h1>
                    <span class="subtitle">记录和管理系统操作日志与工作任务</span>
                </div>
                <div class="work-stats">
                    <div class="stat-card">
                        <div class="stat-icon">
                            <i class="fas fa-tasks"></i>
                        </div>
                        <div class="stat-content">
                            <div class="stat-number">342</div>
                            <div class="stat-label">今日任务</div>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon success">
                            <i class="fas fa-check-circle"></i>
                        </div>
                        <div class="stat-content">
                            <div class="stat-number">298</div>
                            <div class="stat-label">已完成</div>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon warning">
                            <i class="fas fa-exclamation-triangle"></i>
                        </div>
                        <div class="stat-content">
                            <div class="stat-number">15</div>
                            <div class="stat-label">异常记录</div>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon info">
                            <i class="fas fa-users"></i>
                        </div>
                        <div class="stat-content">
                            <div class="stat-number">8</div>
                            <div class="stat-label">在线人员</div>
                        </div>
                    </div>
                </div>
            </header>

            <!-- 搜索筛选区域 -->
            <section class="filter-section">
                <div class="filter-container">
                    <div class="filter-group">
                        <label class="filter-label">
                            <i class="fas fa-calendar"></i>
                            操作时间
                        </label>
                        <div class="filter-inputs">
                            <input type="datetime-local" class="filter-input" value="2024-01-15T08:00">
                            <span class="filter-separator">至</span>
                            <input type="datetime-local" class="filter-input" value="2024-01-15T18:00">
                        </div>
                    </div>
                    
                    <div class="filter-group">
                        <label class="filter-label">
                            <i class="fas fa-user"></i>
                            操作人员
                        </label>
                        <select class="filter-select">
                            <option value="">全部人员</option>
                            <option value="pengyang">彭杨</option>
                            <option value="suzhongjie">苏忠节</option>
                            <option value="qiuzhiwen">丘志文</option>
                            <option value="system">系统管理员</option>
                        </select>
                    </div>
                    
                    <div class="filter-group">
                        <label class="filter-label">
                            <i class="fas fa-cog"></i>
                            操作类型
                        </label>
                        <select class="filter-select">
                            <option value="">全部类型</option>
                            <option value="config">配置修改</option>
                            <option value="scheme">方案操作</option>
                            <option value="system">系统操作</option>
                            <option value="maintenance">设备维护</option>
                        </select>
                    </div>
                    
                    <div class="filter-group">
                        <label class="filter-label">
                            <i class="fas fa-map-marker-alt"></i>
                            涉及路段
                        </label>
                        <select class="filter-select">
                            <option value="">全部路段</option>
                            <option value="zhenzhou">振州路段</option>
                            <option value="yingbin">迎宾路段</option>
                            <option value="fenghuang">凤凰路段</option>
                            <option value="yuya">榆亚路段</option>
                            <option value="shengli">胜利路段</option>
                        </select>
                    </div>
                    
                    <div class="filter-actions">
                        <button class="btn btn-primary">
                            <i class="fas fa-search"></i>
                            搜索
                        </button>
                        <button class="btn btn-outline">
                            <i class="fas fa-redo"></i>
                            重置
                        </button>
                    </div>
                </div>
            </section>

            <!-- 工作记录表格区域 -->
            <section class="table-section">
                <div class="section-header">
                    <div class="section-title">
                        <i class="fas fa-list-ul"></i>
                        工作记录详情
                    </div>
                    <div class="section-actions">
                        <button class="btn btn-outline">
                            <i class="fas fa-download"></i>
                            导出记录
                        </button>
                        <button class="btn btn-primary">
                            <i class="fas fa-plus"></i>
                            新增记录
                        </button>
                    </div>
                </div>
                
                <div class="table-container">
                    <table class="work-table">
                        <thead>
                            <tr>
                                <th>记录ID</th>
                                <th>操作时间</th>
                                <th>操作人员</th>
                                <th>操作类型</th>
                                <th>涉及路段</th>
                                <th>操作内容</th>
                                <th>执行结果</th>
                                <th>耗时</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="record-id">WR202401001</td>
                                <td class="time-cell">15:43:37</td>
                                <td class="operator-cell">
                                    <div class="operator-info">
                                        <i class="fas fa-user-circle"></i>
                                        <span>彭杨</span>
                                    </div>
                                </td>
                                <td><span class="type-badge type-config">配置修改</span></td>
                                <td>振州路-裕民路</td>
                                <td class="content-cell">
                                    <div class="content-preview">更新信号配时参数：红灯90s→95s，绿灯30s→35s</div>
                                </td>
                                <td><span class="status-badge status-success">执行成功</span></td>
                                <td class="duration-cell">2.3s</td>
                                <td class="action-cell">
                                    <button class="action-btn view" title="查看详情">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                    <button class="action-btn download" title="下载日志">
                                        <i class="fas fa-download"></i>
                                    </button>
                                </td>
                            </tr>
                            <tr>
                                <td class="record-id">WR202401002</td>
                                <td class="time-cell">16:22:29</td>
                                <td class="operator-cell">
                                    <div class="operator-info">
                                        <i class="fas fa-user-circle"></i>
                                        <span>苏忠节</span>
                                    </div>
                                </td>
                                <td><span class="type-badge type-scheme">方案操作</span></td>
                                <td>迎宾路-荔枝沟路</td>
                                <td class="content-cell">
                                    <div class="content-preview">创建新的绿波协调优化方案V3.2</div>
                                </td>
                                <td><span class="status-badge status-success">执行成功</span></td>
                                <td class="duration-cell">15.7s</td>
                                <td class="action-cell">
                                    <button class="action-btn view" title="查看详情">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                    <button class="action-btn download" title="下载日志">
                                        <i class="fas fa-download"></i>
                                    </button>
                                </td>
                            </tr>
                            <tr>
                                <td class="record-id">WR202401003</td>
                                <td class="time-cell">19:17:15</td>
                                <td class="operator-cell">
                                    <div class="operator-info">
                                        <i class="fas fa-user-circle"></i>
                                        <span>苏忠节</span>
                                    </div>
                                </td>
                                <td><span class="type-badge type-maintenance">设备维护</span></td>
                                <td>凤凰路-河东路</td>
                                <td class="content-cell">
                                    <div class="content-preview">检修红树林路口信号控制器，更新固件版本</div>
                                </td>
                                <td><span class="status-badge status-warning">部分成功</span></td>
                                <td class="duration-cell">45.2s</td>
                                <td class="action-cell">
                                    <button class="action-btn view" title="查看详情">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                    <button class="action-btn download" title="下载日志">
                                        <i class="fas fa-download"></i>
                                    </button>
                                </td>
                            </tr>
                            <tr>
                                <td class="record-id">WR202401004</td>
                                <td class="time-cell">10:01:04</td>
                                <td class="operator-cell">
                                    <div class="operator-info">
                                        <i class="fas fa-user-circle"></i>
                                        <span>苏忠节</span>
                                    </div>
                                </td>
                                <td><span class="type-badge type-system">系统操作</span></td>
                                <td>凤凰路-大东海</td>
                                <td class="content-cell">
                                    <div class="content-preview">系统数据备份及日志清理操作</div>
                                </td>
                                <td><span class="status-badge status-success">执行成功</span></td>
                                <td class="duration-cell">120.5s</td>
                                <td class="action-cell">
                                    <button class="action-btn view" title="查看详情">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                    <button class="action-btn download" title="下载日志">
                                        <i class="fas fa-download"></i>
                                    </button>
                                </td>
                            </tr>
                            <tr>
                                <td class="record-id">WR202401005</td>
                                <td class="time-cell">09:51:02</td>
                                <td class="operator-cell">
                                    <div class="operator-info">
                                        <i class="fas fa-user-circle"></i>
                                        <span>苏忠节</span>
                                    </div>
                                </td>
                                <td><span class="type-badge type-config">配置修改</span></td>
                                <td>榆亚路-鹿岭路</td>
                                <td class="content-cell">
                                    <div class="content-preview">调整鹿岭路口绿波相位差参数</div>
                                </td>
                                <td><span class="status-badge status-success">执行成功</span></td>
                                <td class="duration-cell">8.9s</td>
                                <td class="action-cell">
                                    <button class="action-btn view" title="查看详情">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                    <button class="action-btn download" title="下载日志">
                                        <i class="fas fa-download"></i>
                                    </button>
                                </td>
                            </tr>
                            <tr>
                                <td class="record-id">WR202401006</td>
                                <td class="time-cell">15:47:09</td>
                                <td class="operator-cell">
                                    <div class="operator-info">
                                        <i class="fas fa-user-circle"></i>
                                        <span>苏忠节</span>
                                    </div>
                                </td>
                                <td><span class="type-badge type-scheme">方案操作</span></td>
                                <td>凤凰路-回新路</td>
                                <td class="content-cell">
                                    <div class="content-preview">提交凤凰路段绿波优化方案审核</div>
                                </td>
                                <td><span class="status-badge status-error">执行失败</span></td>
                                <td class="duration-cell">3.1s</td>
                                <td class="action-cell">
                                    <button class="action-btn view" title="查看详情">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                    <button class="action-btn download" title="下载日志">
                                        <i class="fas fa-download"></i>
                                    </button>
                                </td>
                            </tr>
                            <tr>
                                <td class="record-id">WR202401007</td>
                                <td class="time-cell">15:49:12</td>
                                <td class="operator-cell">
                                    <div class="operator-info">
                                        <i class="fas fa-user-circle"></i>
                                        <span>苏忠节</span>
                                    </div>
                                </td>
                                <td><span class="type-badge type-config">配置修改</span></td>
                                <td>胜利路-跃进路</td>
                                <td class="content-cell">
                                    <div class="content-preview">优化胜利路段信号协调参数配置</div>
                                </td>
                                <td><span class="status-badge status-success">执行成功</span></td>
                                <td class="duration-cell">12.4s</td>
                                <td class="action-cell">
                                    <button class="action-btn view" title="查看详情">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                    <button class="action-btn download" title="下载日志">
                                        <i class="fas fa-download"></i>
                                    </button>
                                </td>
                            </tr>
                            <tr>
                                <td class="record-id">WR202401008</td>
                                <td class="time-cell">16:04:16</td>
                                <td class="operator-cell">
                                    <div class="operator-info">
                                        <i class="fas fa-user-circle"></i>
                                        <span>丘志文</span>
                                    </div>
                                </td>
                                <td><span class="type-badge type-scheme">方案操作</span></td>
                                <td>科技城路-创意路</td>
                                <td class="content-cell">
                                    <div class="content-preview">创建科技城区域绿波协调方案</div>
                                </td>
                                <td><span class="status-badge status-success">执行成功</span></td>
                                <td class="duration-cell">28.6s</td>
                                <td class="action-cell">
                                    <button class="action-btn view" title="查看详情">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                    <button class="action-btn download" title="下载日志">
                                        <i class="fas fa-download"></i>
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <!-- 分页器 -->
                <div class="table-pagination">
                    <div class="pagination-info">
                        显示 1-8 条，共 342 条记录
                    </div>
                    <div class="pagination-controls">
                        <button class="pagination-btn disabled">
                            <i class="fas fa-chevron-left"></i>
                        </button>
                        <button class="pagination-btn active">1</button>
                        <button class="pagination-btn">2</button>
                        <button class="pagination-btn">3</button>
                        <button class="pagination-btn">...</button>
                        <button class="pagination-btn">43</button>
                        <button class="pagination-btn">
                            <i class="fas fa-chevron-right"></i>
                        </button>
                    </div>
                </div>
            </section>
        </div>
    </main>

</body>

</html> 